<template>
  <div>
    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="b">
        <div class="b_1">
          <img :src="detailInfo.goodsImage" alt />
        </div>
        <div class="b_2">
          <div class="b_21" style="margin-left:10px;">{{detailInfo.comName}}</div>
          <div class="b_22" style="margin-left:10px;">数量 X{{detailInfo.goodsCount}}</div>
        </div>
    </div>
    <div class="c">
        <div class="c_item">
          <div>商品总价</div>
          <div>{{detailInfo.comPrice}}</div>
        </div>
        <div class="c_item">
          <div>运费</div>
          <div>{{detailInfo.goodsFreight}}</div>
        </div>
        <div class="c_item1">
          <div>实付款(未支付)</div>
          <div style="color:#F22613;font-weight:500">￥{{Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight)}}</div>
        </div>
    </div>
    <!-- 收货人 -->
    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="b">
        <div class="b_2">
          <div class="b_21" style="width:80%">
            <span style="font-size: 13px;font-weight: bold;">{{detailInfo.userName}}</span>
        <span
          style="margin-left: 20px;font-size: 13px;font-weight: bold;"
        >{{formatTel(detailInfo.phonenumber)}}</span>
          </div>
          <div class="b_21"> <span style="font-size: 13px;width：80%">{{detailInfo.address}}</span></div>
        </div>
        <div class="b_3" v-if="isBuyer">
           <div @click="Seller">联系卖家</div>
           <div style="margin-top:10px;" v-if="this.invitationCode" @click="join">加入TA的群</div>
           <!-- <div style="margin-top:10px;" @click="join">加入TA的群1</div> -->
        </div>
      </div>
   <div style="width:100%;height:1px;background-color:#F8F8F8"></div>
    <div class="c">
        <div class="c_item">
          <div>卖家昵称</div>
          <div>{{detailInfo.snickName}}</div>
        </div>
        <div class="c_item">
          <div>卖家账号</div>
          <div>{{detailInfo.suserName}}</div>
        </div>
        <div class="c_item">
          <div>订单编号</div>
          <div>{{detailInfo.ordersSn}}</div>
        </div>
        <div class="c_item" style="margin-bottom: 30px;">
          <div>交易时间</div>
          <div>{{detailInfo.ordersCreateTime}}</div>
        </div>
      </div>
     <!-- 是否有商品群 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="text">卖家未设群，您可以直接询问TA哦</div>
		  <div class="but">
			  <div class="btn4" @click="cancle">确认</div>
		  </div>
        </div>
      </div>
    </van-overlay>
    <!-- 是否加入群 -->
    <van-overlay :show="show1" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="text">已加入TA的群，是否立即前往该群?</div>
		  <div class="but">
			  <div class="btn2" @click="cancle">取消</div>
			  <div class="btn3" @click="togo">前往</div>
		  </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getFun } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  data() {
    return {
		userId:'',
    ordersId:'',
    show:false,
    show1:false,
    groupList:[],
    invitationCode:'',//邀请码
    url2: this.$api+'/marketuserservice/api/v1/market/getGroupByUserId', // 获取群id
	};
  },
  props: ["detailInfo", "expressDetail", "isBuyer", "isSeller", "addressSite", "goodsId", "nickName", "buyerId", "sellerId", "goodsCoverUrl", "avatar", "savatar","groupid","groupidExist"],
  methods: {
    formatStr(str) {
      if (str) {
        let len = str.length - 1;
        let str1 = str.substring(0, 2);
        for (var i = 0; i < len; i++) {
          str1 = str1 + "*";
        }
        return str1;
      } else {
        return "";
      }
    },
    formatTel(str) {
      if (str) {
        let str1 = str.substring(0, 3);
        let str2 = str.substring(7, 11);
        return str1 + "****" + str2;
      } else {
        return "";
      }
    },
    getExpress() {
      let that = this;
      this.$Axios2.Get(this.url2 + "/" + this.ordersId + "/" + this.userId).then(function(res) {
          that.expressDetail = res.data.ordersExpressInfo;
        });
    },
    cancle(){
      this.show=false;
      this.show1=false;
    },
    //联系卖家
    Seller() {
    this.getIm(this.goodsId,this.nickName,this.buyerId,this.sellerId,this.goodsCoverUrl,this.savatar,this.ordersId);	
    },
    getGroupInfo(){
    let that = this;
    this.$Axios2.Get(this.url2 + "/" + this.userId).then(function(res) {
      that.groupList = res.data.list
    });
    },
    togo(){
      this.goGroup(String(this.groupid));
      this.show1 = false;
    },
    //判断是否有加入群
    getId(){
      let isTrue = false;
      this.groupList.forEach((item) => {
      //已经加群，显示弹窗是否前往该群
      if(this.groupid==item.ngroupID){
        this.show1=true;
        isTrue = false;
        return;
      }else{
        isTrue = true;
      }
    })
    return isTrue;
   },
  join(){
    //判断是否有商品群
    if(this.groupid!=null){
      //判断是否加群
      if(this.groupidExist==true){
        this.show1=true;
      }else{
        this.getGroup(String(this.groupid))
      }
    }else{
      this.show=true;
    }
  },
},
  mixins: [publicFun], //混入
  mounted() {
    this.invitationCode = this.getCode();
  }
};
</script>

<style scoped="">
.b {
  display: flex;
  padding: 15px;
}
.one {
  padding: 15px;
  line-height: 25px;
  color: #333333;
  font-family: PingFang SC;
  /* border-bottom: 1px solid #f8f8f8; */
}
.two {
  display: flex;
  padding: 15px;
  color: #999999;
  font-family: PingFang SC;
  border-bottom: 1px solid #f8f8f8;
}
.b_1 img {
  width: 60px;
  height: 60px;
  display: block;
  border-radius: 5px;
}
.b_2 {
  flex: 1;
  padding: 0 20px 0 0;
}
.b_21 {
  font-size: 14px;
  display: -webkit-box;
  font-weight: bold;
  margin-bottom:5px;
  opacity: 0.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.b_22 {
  color: #ccc;
  margin-top: 5px;
}
.b_3 {
  color: #3296fa;
  font-size: 14px;
  margin-top: 3%;
  line-height: 20px;
}
.b_33 {
  float:right;
  color: #3296fa;
  font-size: 14px;
  margin-top: -10px;
  line-height: 20px;
}
.a {
  padding: 10px;
  border-top: 1px solid #f5f3f5;
  border-bottom: 1px solid #f5f3f5;
}
.c {
  /* margin-bottom: 10px; */
  padding: 10px 15px;
}
.c_item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  color: #aaa;
  font-size: 12px;
}
.c_item1 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  color: #333;
  font-size: 13px;
  font-weight: bold;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 80%;
  background-color: #fff;
  border-radius: 5px;
}
.text {
  font-size: 12px;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  line-height: 24px;
  margin: 40px 20px 20px 25px;
}
.but{
  position: relative;
  bottom: 0;
  display: flex;
  text-align: center;
  height: 45px;
  line-height: 45px;
  font-size: 15px;
}
.btn2{
  width: 50%;
  border: 1px solid #E5E5E5;
}
.btn3{
  width: 50%;
  background-color: #FFD630;
}
.btn4{
  width: 100%;
  background-color: #FFD630;
}
</style>